{extend name="../layout/base"}
{block name="title"}{$web_title}{/block}
{block name="css"}
<link href="__CSS__/slide-unlock.css" rel="stylesheet">
<link href="__CSS__/login.css" rel="stylesheet">
<style>
.container{
margin-top:20px;
}
</style>
{/block}
{block name="body"}
	<div class='read mhDeail'>
		<div class='head'>
			<table class='headTable head' cellpadding="0" cellspacing="0">
				<tr>
					<td class="head_left"><a href="javascript:history.back(-1);"><img src='__IMG__/readLeft.png' class='readHeadLeftImg'></a></td>
					<td align="center">注册</td>
					<td class="head_right"><a href="/"><img src='__IMG__/bottomButOn2.png' class='readHeadLeftImg'></a></td>
				</tr>
			</table>
		</div>
	</div>
	<div class="container">
    <div class="content bottom-border">
        <form>
            <div class="login">
                <div class="web_login">
                    <ul class="g_list">
                        <li>
                            <label for="mobile">手机号码:</label>
                            <input id="mobile" class="inputstyle" maxlength="16" name="mobile" autocorrect="off"
                                   placeholder="请输入手机号码" type="text">
                        </li>
						<li>
                            <label for="password">设置密码:</label>
                            <input id="password" class="inputstyle" maxlength="16" name="password" autocorrect="off"
                                   placeholder="请输入密码" type="text">
                        </li>
                        <li>
                            <div id="slider">
							<div id="slider_bg"></div>
							<span id="label">>></span> <span id="labelTip">拖动滑块验证</span> 
							</div>
							<input type="hidden" name="verif" id="verif" value="0"/>
                        </li>
						<li>
                            <label for="code">验证码:</label>
                            <input id="code" class="inputstyle" maxlength="16" type="text" name="code" id="code" autocorrect="off" placeholder="请输入短信验证码">
                            <div class="code">
                                <button type="button" id="code_phone" onclick="sendMessage()"> 获取验证码</button>
                            </div>
                        </li>
                    </ul>
                    <p class="switch">
                        <label><input id="agree" value="1" checked="checked" type="checkbox">我已阅读同意</label>
                        <a href="/login/protocol" class="right">《用户协议》</a>
                    </p>
                    <a href="javascript:void(0);" onclick="register()" class="btn_top"> 注册</a>
                    <a href="/login.html" class="btn_bottom weak">已有帐号请直接登录</a>
                </div>
            </div>
        </form>
    </div>


</div>
{/block}
{block name="bootem_js"}

<script src="__JS__/jquery.slideunlock.js"></script> 
  <script>
    $(function () {
        var slider = new SliderUnlock("#slider",{
				successLabelTip : "验证成功"	
			},function(){
				$('#verif').val('1');
        	});
        slider.init();
    })
	function validateMobile() {
		var mobile = document.getElementById('mobile').value;
		var verif = document.getElementById('verif').value;
		console.log(mobile);
		if (mobile.length == 0) {
			layer.msg('手机号不能为空');
			document.getElementById('mobile').focus();
			return false;
		}
		var phoneReg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
		if (!phoneReg.test(mobile)) {
			layer.msg('请输入有效的手机号码');
			document.getElementById('mobile').focus();
			return false;
		}
		if(mobile.length != 11){
			layer.msg('请输入有效的手机号码');
			document.getElementById('mobile').focus();
			return false;
		}
		if(verif!=1){
			layer.msg('滑块验证未通过');
			//document.getElementById('captcha').focus();
			return false;
		}
		return true;
	}
	function sendMessage() {
		if (validateMobile()) {
			var form = $("form");
			console.log(form.serialize())
			$.ajax({
				type: 'POST',
				url: '/login/sendcode',
				data: form.serialize(),
				success: function(json){
					if(json.code == 1) {
						layer.msg("发送成功");
						$('#code_phone').attr("disabled", "disabled");
						var i = 61;
						timer();
						function timer() {
							i--;
							$('#code_phone').text(i + '秒后重发');
							if (i == 0) {
								clearTimeout(timer);
								$('#code_phone').removeAttr("disabled");
								$('#code_phone').text('重新发送');
							} else {
								setTimeout(timer, 1000);
							}
						}

					}
				},
			});
		}
	}
	function register() {
        //validateMobile();
        if ($('#agree').is(':checked') == false) {
           layer.alert('必须同意用户协议')
            return false;
        }
		if ($('#password').val() == '') {
            layer.alert('密码不能为空')
            return false;
        }
        if ($('#code').val() == '') {
            layer.alert('验证码不能为空')
            return false;
        }
        if ($('#username').val() == '') {
            layer.alert('用户名不能为空')
            return false;
        }
        var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
         if(!uPattern.test($('#username').val() )){
             layer.alert('用户名不能包含特殊字符');
         }
        var form = $("form");
        $.ajax({
            type: 'POST',
            url: '/register',
            data: form.serialize(),
            success: function (json) {
                if (json.code == 1) {
					layer.msg(json.msg);
						setTimeout(function(){ 
							location.href = '/personal/info';
					}, 1000);
                } else {
                    layer.msg(json.msg);
					setTimeout(function(){ 
						location.reload();
					}, 1500);
                }
            },
        });
    }
</script> 
{/block}